<template>
  <div class="SectionContainer">
    <div class="title">
      <span>{{ title }}<span class="border" /></span>
      <slot name="rightBox" />
    </div>
    <div class="context">
      <slot />
    </div>
  </div>
</template>

<script>

export default {
  name: 'SuggestContainer',
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss">
.SectionContainer {
  width: 100%;
  background: #ffffff;
  box-shadow: 4px 4px 10px 0 rgba(218, 218, 218, 0.5);
  margin-bottom: 6px;
  .el-row {
    list-style-type: none;
  }
  [class*="el-col-"] {
    display: inline-block;
    vertical-align: top;
    float: none;
  }
  .title {
    width: 100%;
    height: 58px;
    line-height: 58px;
    font-size: 16px;
    color: #4a4a4a;
    font-weight: 500;
    border: 2px solid #f8f9fa;
    position: relative;
    padding: 0 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .border {
      width: 5px;
      height: 17px;
      position: absolute;
      left: 16px;
      top: 0;
      bottom: 0;
      margin: auto;
      background-image: linear-gradient(270deg, #ff9600 0%, #ffb400 100%);
      border-radius: 2.5px;
      border-radius: 2.5px;
      display: inline-block;
    }
  }
  .context {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
  }
}
</style>
